<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手撕todolist</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background-color: rgb(228, 220, 220);
        }

        * {
            box-sizing: border-box;
        }

        .container {
            display: flex;
            flex-direction: column;


        }

        .search-list-container {
            border: solid 1px rgb(224, 224, 224);
            /* position: relative; */
            padding-top: 0;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0;
            margin-bottom: 1rem;
            border-radius: 16px;
            border-width: 1px;
            background-color: white;
        }

        .card {
            border: solid 1px rgb(224, 224, 224);
            margin-left: auto;
            margin-right: auto;
            margin-top: 1rem;
            margin-bottom: 1rem;
            padding: 0.75rem;
            border-radius: 6px;
            background-color: white;
        }


        .todo-item> :first-child {
            margin-right: 1rem;
        }

        .close::after {
            display: inline-block;
            content: 'x';
            color: rgb(150, 150, 150);
        }

        .form-input {
            margin-top: 0;
            width: fit-content;
            border-radius: 16px;
            padding-left: 10px;
            padding-right: 10px;
            /* padding-top: 0px; */
            padding-bottom: 4px;

            /* border-style: solid;
            border-width: 1px;
            border-color: rgb(233, 230, 230); */

        }

        #search-list {
            margin: 0;
        }

        .search-list-container:hover {
            box-shadow: rgb(199, 199, 199) 0 0 4px 1px;
        }

        .hidden {
            display: none;
        }

        em {
            color: red;
            font-style: normal;
        }

        .form-input input {
            outline-style: none;
            border-style: none;
            width: max-content;
            display: inline-block;
        }

        .form-input button {
            border: none;
            margin-left: auto;
            background-color: transparent;
            color: rgb(156, 156, 156);
            outline: none;
        }

        .form-input button:hover {
            color: rgb(99, 125, 241);
        }

        .deleted {
            text-decoration: line-through;
            color:rgb(150, 150, 150);
        }
        ul>li {
            list-style-type: none;
        }
        li:hover {
            background-color: azure;
        }
        .todo-item {
            width: 100%;
        }


        .close {
            float: right;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="card">
            <h1>手写一个todolist
            </h1>
            <ol>
                <li>输入新todo，按回车添加</li>
                <li>候选词列表，输入内容与已有todo进行模糊匹配，将匹配的todo项显示在候选词列表上，匹配部分标红，点击候选词会自动上屏</li>
                <li>显示todo列表，每一项都有删除按钮，可以实现删除</li>
                <li>利用css美化界面</li>
            </ol>

        </div>
        <div class="card">
            <h2>TODO</h2>
            <div class="search-list-container" id="search">
                <form id="to-add">
                    <div class="form-input">
                        <input type="text" name="input" autocomplete="off">
                        <button>添加</button>
                    </div>
                </form>
                <ul id="search-list">
                </ul>
            </div>
            <ul id="todo-list" class="card">
                <!-- 
                <li class="todo-item"><span>xxxxxxx</span><span class="close"></span></li>
                <li class="todo-item"><span>xxxxxxx</span><span class="close"></span></li> -->
            </ul>
        </div>
    </div>
    <script>
        var input = document.getElementsByName("input")[0];
        var form = document.getElementById("to-add");
        var todoList = document.getElementById('todo-list');
        var searchList = document.getElementById('search-list');
        var search = document.getElementById("search");
        input.addEventListener("input", function () {
            searchList.innerHTML = "";
            var newTodo = event.target.value.trim();
            if (!newTodo) {
                return true;
            }
            var candidates = [];
            var keyword = new RegExp(`^(.*?)(${newTodo})(.*)$`);
            for (let i = 0; i < todoList.children.length; ++i) {
                var matched = todoList.children[i].textContent.match(keyword);
                if (matched) {
                    candidates.push(matched[1] + '<em>' + matched[2] + '</em>' + matched[3]);
                }
            }
            console.log(candidates);
            var tmp = document.createDocumentFragment();
            candidates.forEach(el => {
                var li = document.createElement('li');
                li.innerHTML = el;
                tmp.appendChild(li);
            })
            searchList.appendChild(tmp);
            return true;
        });
        form.addEventListener("submit", function () {
            var tmp = input.value.trim();
            if (tmp) {
                addItem(tmp);
            }
            input.value = "";
            event.preventDefault();
        });

        todoList.addEventListener("click", function () {
            console.log(event.target.nodeName);
            if (event.target.classList.contains("close")) {
                var item = event.target.parentNode;
                todoList.removeChild(item);
                return true;
            }else if (event.target.classList.contains("todo-item")) {
                event.target.children[0].checked = !event.target.children[0].checked;
                event.target.children[1].classList.toggle("deleted");
            }
        });

        window.onload = function () {
            var todos = JSON.parse(localStorage.getItem("todos"));
            if (!todos) {
                return;
            }
            todos.forEach(tmp => {
                addItem(tmp);
            });
        }
        window.onbeforeunload = function () {
            var todos = [];
            for (let i = 0; i < todoList.children.length; ++i) {
                var str = todoList.children[i].textContent;
                todos.unshift(str);
            }
            localStorage.setItem("todos", JSON.stringify(todos));
        }

        function addItem(value) {
            var li = document.createElement("li");
            li.classList.add("todo-item");
            li.innerHTML = `<input type="checkbox"/><span class="todo-text">${value}</span><span class="close"></span>`;
            todoList.insertBefore(li, todoList.children[0]);
        }
    </script>
</body>

</html>